<div class="container">
<div id='product_adder_popup' title="Ajouter Un Produit" style="display:none">
	<div class='product_name'></div>
	<div class='product_category pull-right muted'></div>
	<hr>
	<span class="label">Quantit&eacute;</span>
	<div id='slider'></div><span id="amount" style="border: 0; color: #f6931f; font-weight: bold;"></span>
	<div><strong>Prix Total: </strong><span class='total_price'/></div>
	<div><strong>Prix sp&eacute;cial adh&eacute;rents: </strong><span class='total_associate_price'/></div>
			<span style='display:none' class='unity_price'/>
			<span style='display:none' class='unity_associate_price'/>
			<span style='display:none' class='unity_bond'/>
			<span style='display:none' class='total_bond'/>
</div>

<?php
foreach($ProductList as $productType=>$productItems){
	if(sizeof($productItems) > 0){
		echo '<h1>'.$productType.'</h1>';
		echo '<div class="row">';
		
		for($i=0 ; $i<sizeof($productItems)-1; $i++){
			$isFirstInRow = false;
			if($i % 3 == 0){
				$isFirstInRow = true;
				if ($i!=0) {
					echo '</div><div class="row">';
				}
			}
			echo $this->ProductBuilder->displaySmallProduct($productItems[$i], $isFirstInRow);
		}
		echo '</div>';
	}
}
?>
<script type="text/javascript">	
	
	var maxSlider = {"Vaisselle Economique":500,
					 "Vaisselle Buvette":   2000,
					 "Vaisselle Classique": 120,
					 "Vaisselle Plastique": 200};
	var i_price_unity;
	var i_price_associate;
	var i_bond;
	var i_productId;
	var i_number;
	
	function confirmProduct(productID){
		//Set Hidden Fields
		i_productId = productID;
		var productName = $('#hdn_product_name_'+productID).val();
		var productCategory = $('#hdn_product_category_'+productID).val();
		i_price_unity = Number($('#hdn_product_price_'+productID).val());
		i_price_associate = Number($('#hdn_product_associateprice_'+productID).val());
		i_number = 1;
		i_bond = Number($('#hdn_product_bond_'+productID).val());

		$('#product_adder_popup .product_name').html('<h3>' + productName + '</h3>');
		$('#product_adder_popup .product_category').text(productCategory);
		$('#product_adder_popup .unity_price').text('\u20ac '+i_price_unity);
		$('#product_adder_popup .unity_associate_price').text('\u20ac '+i_price_associate);
		$('#product_adder_popup .unity_bond').text('\u20ac '+i_bond);
		$('#slider').slider( "option", "max", maxSlider[$('#hdn_product_category_'+productID).val()]);
		
		refreshTotals();
		$('#product_adder_popup').dialog('open');
	}
	
	function refreshTotals(){
		var totalPrice = (i_price_unity * i_number).toFixed(2);
		var totalBond = (i_bond * i_number).toFixed(2);
		var totalAssociatePrice = (i_price_associate * i_number).toFixed(2);
		$("#amount" ).text(i_number);
		$('#product_adder_popup .total_price').text('\u20ac '+ totalPrice);
		$('#product_adder_popup .total_associate_price').text('\u20ac '+ totalAssociatePrice);
		$('#product_adder_popup .total_bond').text('\u20ac '+ totalBond);
	}
	function addProduct()
	{
		var request = {};
		request.id = i_productId;
		request.number = i_number;
		var jsonRequest = JSON.stringify(request);

		$.ajax({
			url: '<?php echo Router::url(array('controller'=>'products','action'=>'add'),true);?>',
			type: 'post',
			dataType: 'json',
			data: {data: jsonRequest},
			success: function(response) {
				updateCart(response.summary.totalPrice);
				console.log(response);
			},
			error:function( req, status, err ) {
				console.log( 'something went wrong', status, err );
			}
		});
	};
	$(document).ready(function(){
		$('#product_adder_popup').dialog({
			autoOpen: false,
			height: 400 ,
			width: 400,
			modal: true,
			buttons: {
					"Valider": function() {
						//Add to the cart
						if(i_number > 0){
							addProduct();
						}
						$( this ).dialog( "close" );
					},
					"Annuler": function(){
						$( this ).dialog( "close" );
					}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
			,
			close: function() {
				$("#slider").slider("value", $("#slider").slider("option", "min"));
			}
		});
		$('#slider').slider({
			animate: true,
			range:'min',
			value:1,
			min: 1,
			step: 1,
			slide: function( event, ui ) {
				i_number = ui.value;
				refreshTotals();
			}
		});
	});	
</script>